﻿package com.colorpicker{
	/**
	Main class for ColorPicker 
	
	@author Sharwan Kami <sharwan@gmail.com>
	@version 1.0
	@history 2009-05-10
	
	* 
	* This file is part of E-Card plugin, from zetaprints.com
	* 
	
	@usage
	Activate with:
		<code>
			//create the instance of the ZColorPicker
			zcp=new ZColorPicker();
			
			//pass the hex value of color, x and y coordinates where the color picker will appear
			zcp.showColorPicker(color:uint,[x:Number],[y:Number]);
			
			//add event listeners for color select and close buttons
			zcp.addEventListener(zcp.COLOR_SELECT,onColorChange);
			zcp.addEventListener(zcp.COLOR_PICKER_CLOSE,onColorPickerClose);
			
			//add the color picker
			addChild(zcp);
		</code>
	
	*/

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormatAlign;
	import flash.events.*;
	import flash.geom.Rectangle;
	import flash.filters.DropShadowFilter;
	
	public class ZColorPicker extends MovieClip{
		//constants to be used with event listeners
		public const COLOR_SELECT:String="colorSelected";
		public const COLOR_PICKER_CLOSE:String="cpClosed";
		
		private var colorSlider:ColorSlider;//the gradient color slider(on right)
		private var colorCanvas:ColorPickerCanvas;//the canvas where gradient saturation of selected hue(color) appears
		private var window:Sprite;//color picker window(background)
		private var windowWidth:Number=320;//width of the color picker window
		private var windowHeight:Number=240;//height of the colorpicker window
		private var windowTitleHeight:Number=20;//height of the color picker window title
		private var colorBox:ColorBox;//rectangle box to view selected color
		private var txtColor:TextField;//textfield to display/input color code
		private var btnSelect:ZButton;//button to make color selection
		private var btnClose:ZButton;//button to close the color picker
		private var activeColor:uint=0xF0A0A0;//the selected color
		
		/**
			Constructor
		*/
		function ZColorPicker(){		
			//init();
		}
		
		/**
		initialises the color pickers and sets the color, x and y values
		*/
		public function showColorPicker(color,x=0,y=0):void{
			this.x=x;
			this.y=y;	
			activeColor=color;
			init();
		}
		
		/**
		creates the window, title bar, buttons, textfield(to display selected color value), color slider and color canvas
		also, it calls setter function to update color for color slider, color canvas, box and active color
		*/
		function init():void{
			//create the window
			window=new MovieClip();
			window.graphics.beginFill(0xffffff);
			window.graphics.drawRect(0,0,windowWidth,windowHeight);
			window.graphics.endFill();
			
			window.graphics.beginFill(0xe0e0e0);
			window.graphics.drawRect(1,1,windowWidth-2,windowHeight-2);
			window.graphics.endFill();
			
			window.graphics.beginFill(0x323639);
			window.graphics.drawRect(1,1,windowWidth-2,windowTitleHeight);
			window.graphics.endFill();
						
			var dropShadow=new DropShadowFilter();
			window.filters=[dropShadow];
			dropShadow.distance = 1;
			dropShadow.alpha = .1;
			dropShadow.blurX = 10;
			dropShadow.blurY = 10;
			addChild(window);
			
			window.addEventListener(MouseEvent.MOUSE_DOWN,onWindowDown);
			window.addEventListener(MouseEvent.MOUSE_UP,onWindowUp);
			
			// add color slider
			colorSlider=new ColorSlider();
			colorSlider.color=activeColor;
			colorSlider.x=216;
			colorSlider.y=30;
			addChild(colorSlider);
			
			//add color canvas
			colorCanvas=new ColorPickerCanvas();
			colorCanvas.x=8;
			colorCanvas.y=30;
			addChild(colorCanvas);
			colorCanvas.init();
			
			//add color box
			colorBox=new ColorBox();
			colorBox.color=activeColor;
			colorBox.x=windowWidth-8-colorBox.width;
			colorBox.y=windowTitleHeight+10;
			addChild(colorBox);
			//colorBox.init();
			
			//add text field for color input
			createColorInputText();
			
			//add buttons
			createBtns();
			
			//add event listners
			colorCanvas.addEventListener("saturationChanged",onSaturationChanged);
			colorCanvas.addEventListener("colorChanged",onCanvasColorChanged);
			colorSlider.addEventListener("colorChanged",onSliderColorChanged);
			
			//set the active color using setter
			color=activeColor;
		}
		
		// EVENT LISTENERS FOR WINDOW
		private function onWindowDown(e):void{
			this.startDrag();
		}
		
		private function onWindowUp(e):void{
			this.stopDrag();
		}
		// EVENT LISTNERS END
		
		
		private function onCanvasColorChanged(e:Event):void{
			//update the color of the box based on selected color
			colorBox.color=activeColor;
		}
		
		private function onSaturationChanged(e:Event):void{
			activeColor=colorCanvas.color;
			colorBox.color=activeColor;
			setColorToTextfield();
		}
		
		function onSliderColorChanged(e):void{
			colorCanvas.draw(colorSlider.color);
			activeColor=colorCanvas.color;
			colorBox.color=activeColor;
			setColorToTextfield();
		}
		
		function setColorToTextfield():void{
			txtColor.text=ZColor.getRGB(activeColor);
		}		
		
		private function onBtnSelect(e):void{
			dispatchEvent(new Event("colorSelected"));
		}
		
		private function onBtnClose(e):void{
			dispatchEvent(new Event("cpClosed"));
		}
		
		private function createColorInputText():void{
			var formatTitle:TextFormat = new TextFormat();
            formatTitle.font = "Verdana";
            formatTitle.color = 0xFFFFFF;
            formatTitle.size = 12;
			formatTitle.bold=true;
			
			var format:TextFormat = new TextFormat();
            format.font = "Verdana";
            format.color = 0x000000;
            format.size = 11;
			//format.align=TextFormatAlign.CENTER;
			
			
			var txtTitle=new TextField();
			txtTitle.x=5;
			txtTitle.y =2;
			txtTitle.selectable=false;
			txtTitle.autoSize=TextFieldAutoSize.LEFT;
			
            txtTitle.defaultTextFormat = formatTitle;			
			txtTitle.text="Color Picker";	
			addChild(txtTitle);
			
			var txtHash=new TextField();
			txtHash.x=colorBox.x-10;
			txtHash.y = colorBox.y+colorBox.height+5;
			txtHash.selectable=false;
			txtHash.text="#";
			txtHash.width=10;
			addChild(txtHash);
			
			txtColor=new TextField();
			txtColor.defaultTextFormat = format;
			txtColor.type=TextFieldType.INPUT;
			txtColor.border=true;
			txtColor.borderColor=0x000000;
			txtColor.background=true;			
			txtColor.backgroundColor=0xffffff;
			txtColor.selectable=true;
			txtColor.text=ZColor.getRGB(activeColor);
			
            txtColor.x = colorBox.x; 
			txtColor.y = colorBox.y+colorBox.height+5;
			txtColor.maxChars=6;
            txtColor.width = colorBox.width; 
			txtColor.height = 20;
			
			addChild(txtColor);
			
			txtColor.addEventListener(TextEvent.TEXT_INPUT,onTextInput);
			//txtColor.addEventListener((MouseEvent.CLICK,onTextClick);
		}
		
		/**
		event listener for textfield, which gets fired when color is entered into textfield
		*/
		private function onTextInput(e:TextEvent):void{
			var txt;
			if(e.text.length==6){
				txt=e.text;
			}else{
				txt=e.target.text+e.text;
			}

			if(txt.length==6){
				if(ZColor.colorValidator(txt)==false){
					return;
				}
				var colorStr="0x"+txt;
				var c:uint=colorStr;
				color=c;
				setColor(txt);
			}
		}
		
		public function setColor(val:String):void{
			//format the color value to required format using ZColor static class
			var hexText = ZColor.formatHex(val);
			var rgb = ZColor.hexToRgb("0x" + hexText);
            var hsv = ZColor.rgbToHsv(rgb.r, rgb.g, rgb.b);
            var hex = ZColor.rgbToHex(rgb.r, rgb.g, rgb.b,false);
            var hueRgb = ZColor.hsvToRgb(hsv.h, 1, 1);
            var hueHex = ZColor.rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b,false);
			
			
			var c=uint("0x"+hueHex);		
			
			//draw the gradient based on selected hue
			colorCanvas.draw(c);
			
			//position the crosshair based on selected color
			var cc=uint("0x"+val);
			colorCanvas.setCursorPosition(cc);
			
			
			//update the position of cursor in color slider
			//colorSlider.setSliderPosition(c);	
			var yp=((hsv.h * 199) - 5);
			yp=(yp<0)?0:yp;//if the y value is in minus, set it to zero
			colorSlider.colorSlider.y = yp;
			
			activeColor=cc;
		}
		
		private function createBtns():void{
			btnSelect=new ZButton("Select");
			btnClose=new ZButton("Close");
			
			btnSelect.x=btnClose.x=colorBox.x;
			btnSelect.y=txtColor.y+txtColor.height+5;
			btnClose.y=windowHeight-(btnClose.height+10);
			
			addChild(btnSelect);
			addChild(btnClose);
			
			btnSelect.addEventListener(MouseEvent.CLICK,onBtnSelect);
			btnClose.addEventListener(MouseEvent.CLICK,onBtnClose);
		}
		
		//setter function
		public function set color(val):void{
			setColor(ZColor.getRGB(val));
		}
		
		//getter function
		public function get color():uint{
			return activeColor;
		}
	}
}